/**
 * Created by huotaol on 2017/9/21.
 */
import React from "react";
import { connect } from "react-redux";
import { Table,Button } from "antd";
import {get} from "@/axios/tools";

const DEFAULT_SIZE = 10;
const PLACEHOLDER_IMG = require('@/asset/placeholder_sm.jpg');

class SetMeal extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            setMealList:{},
            picPre:null
        };

        this.columns = [{
            title: "编号",
            dataIndex: "id",
            render : text => text
        }, {
            title: '名称',
            dataIndex: 'name',
            render : text => text
        }, {
            title: '价格(￥)',
            dataIndex: 'price',
            render : text => text
        }, {
            title: '优惠价(￥)',
            dataIndex: 'reducedPrice',
            render : text => text
        },
        // {
        //     title:"分数",
        //     dataIndex:'score'
        // },
        {
            title: '图片',
            dataIndex: 'images',
            width: 200,
            render: (value, record) => {
                const { picPre } = this.state;
                let imageUrl = PLACEHOLDER_IMG;
                if (value.length) {
                    const data = value[0];
                    imageUrl = picPre + '/' + data.local;
                    console.log(value);
                }
                return (<div style={{ width: '100%' }}><img src={imageUrl} alt="test" width="50%" /></div>);
            }
        },{
            title: '套餐状态',
            dataIndex: 'status',
            render : (value,rowValue) => {
                let statusMap = {
                    'ENABLE': ['上架', ''],
                    'SELL_OUT': ['售罄', '#ff3d1c'],
                    'DISABLE': ['下架', '#b3b3b3']
                }
                return (<div style={{ color: statusMap[value][1] }}>{statusMap[value][0]}</div>);
            }
        },{
            title:'操作',
            dataindex:'edit',
            render : (value,rowValue) =>{
                return (<div><Button onClick={()=>{
                    const { router } = this.props;
                    const { setMealList } = this.state;
                    let obj = {};
                    obj.setmeal = value;
                    obj.picPre = setMealList.extra.basePicUrl;
                    localStorage.setItem("setmealInfo",JSON.stringify(obj));
                    router.push('/app/setmeal/selectFoodList');
                }} type="primary">编辑</Button></div>)
            }
        }];
    }


    editClick = (rowValue) =>{
    }

    componentDidMount() {
        let {setMealList,picPre} = this.state;
        get("/setmeal/ListSetMeal",{page:1,pageSize:DEFAULT_SIZE}).then(data=>{
            setMealList = data;
            for(let i in setMealList.data){
                setMealList.data[i].key = setMealList.data[i].id;
            }
            this.setState({setMealList,picPre:data.extra.basePicUrl});
        })
       
    }

    tableOnChange=(pagination, filters, sorter) =>{
        let {setMealList} = this.state;
        get("/setmeal/ListSetMeal",{page:pagination.current,pageSize:DEFAULT_SIZE}).then(data=>{
            setMealList = data;
            for(let i in setMealList.data){
                setMealList.data[i].key = setMealList.data[i].id;
            }
            this.setState({setMealList});
        })
    }

    render() {
        const {setMealList} = this.state;
        return (
            <div className="content-container">
                <Table dataSource={setMealList.data} columns={this.columns} onChange={this.tableOnChange} pagination={
                    {
                        total: setMealList.total,
                        defaultPageSize: DEFAULT_SIZE,
                        current: setMealList.currentPage
                    }
                } />
            </div>
        )
    }

}


export default SetMeal